<div class="ibox select-more-wrap">
	<div class="ibox-content" style="padding:4px 10px;">
		<div class="form-inline" style="margin:8px 0;">
			<div class="form-group">
				<input class="form-control" type="text" placeholder="请输入关键词" name="query_goods_name" id="query_goods_name" />
			</div>
			<a class="btn btn-info" onclick="initPage(1)"><i class="fa fa-search"></i> 检索{$divfield}</a>
		</div>
		<div class="load-goods-list"></div>
		<div id="ajaxpage">{$page}</div>
	</div>
</div>
<script id="goods-list-tpl" type="text/html">
	<div class="row" style="margin-left:-4px;margin-right:-4px;">
		{{ each list }}
		<div class="col-xs-3 plus-goods-list"  data-skuid="{{ $value.sku_id }}" style="padding-left:4px;padding-right:4px;">
			<div class="thumbnail">
				<img src="{{ $value.goods_thumb }}" alt="{{ $value.fulltitle }}" style="width:70%;height:100px;">
				<div class="caption">
					<a href="javascript:;" title="{{ $value.fulltitle }}" style="display:block;height:38px;overflow-y: hidden">{{ $value.fulltitle }}</a>
					<p>商城价:{{ $value.simple_price }}元</p>
					<button type="button" data-info="{{ $value.json }}" class="btn btn-primary btn-block select-goods">选择该商品</button>
				</div>
			</div>
		</div>
		{{ /each }}
	</div>
</script>
<script>
    $(function () {
        initPage(1);
        $('.select-more-wrap').on('click','.select-goods',function(){
            $(this).closest('.plus-goods-list').addClass('selected');
            $(this).removeClass('btn-primary').addClass('btn-warning').attr("disabled","disabled");
            var skuId = $(this).closest('.plus-goods-list').data('skuid');
            var info = $(this).data('info');
            var skuIds = localStorage.getItem("sku_ids");
            var skuList=[];
            if(skuIds==null){
                localStorage.setItem('sku_ids',skuId);
                skuList.push(info);
                localStorage.setItem("sku_list", JSON.stringify(skuList));
            }else{
                skuList=JSON.parse(localStorage.getItem("sku_list"));
                skuList.push(info);
                localStorage.setItem("sku_ids", skuIds+','+skuId);
                localStorage.setItem("sku_list", JSON.stringify(skuList));
            }
        })
    });

    /**
     * select-goods 当前点击项目
     * @param obj
     */
    function formatList() {
        var skuIds = localStorage.getItem("sku_ids"); //已选择的skuids
        if(skuIds==null){
            return;
        }
        skuIds = skuIds.split(',');
        $(".plus-goods-list").each(function () {
            var skuid = $(this).data('skuid').toString();
            var result = $.inArray(skuid, skuIds);
            if(result>=0){ //存在
                $(this).addClass('selected');
                $(this).find('.select-goods').removeClass('btn-primary').addClass('btn-warning').attr("disabled","disabled");
            }
        });
    }


    function initPage(curr) {
        In('laypage','echo','templete',function() {
            $.getJSON("{:url('ajaxGoods')}", {
                page: curr || 1,
                site_id: "{$Request.param.site_id}",
                query_goods_name: $('#query_goods_name').val()
            }, function (res) {
                //显示数据
                var html = template('goods-list-tpl', res);
                $('.load-goods-list').html(html);
                formatList();
                //显示分页
                laypage({
                    cont: 'ajaxpage', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: res.total, //通过后台拿到的总页数
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            initPage(obj.curr);
                        }
                    }
                });
            });
        })
    }
</script>